<template>
  <view class="w100p common_wrap no-bg">
    <CommonHeader :title="$t('发布采购信息')" ></CommonHeader>
    <view class="w100p pr list_block">
		<tipSl :text="$t('【重要提示】请如实描述发布内容及相关信息，禁止虚假宣传！违规信息将下架或封号处理。')" style="margin: 0;background-color: transparent;padding-left:0;padding-right: 0;"></tipSl>

      <scroll-view scroll-y>
        <view class="box-same">
          <view class="inp-li" @click="shopCategoryOpen=true">
            <view class="title">{{$t('商品分类')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :disabled="true" :placeholder="$t('请选择商品分类')" placeholder-class="input-placeholder-cai" readonly v-model="productName"/>
              <view class="aroow">
                <image
                  src="/static/caigou/xiala.png"
                />
              </view>
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('商品名称')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入商品名称')" placeholder-class="input-placeholder-cai" v-model="purchaseInfo.productName"/>
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('目的地')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('输入收货地址')" placeholder-class="input-placeholder-cai" v-model="purchaseInfo.destination"/>
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('需求数量')}}<text>*</text></view>
            <view class="inp">
							<u-input v-model="purchaseInfo.amount" type="number" :placeholder="$t('输入数量')" placeholder-style="color: #606366;font-size: 26rpx;"  :clearable="false"/>
            </view>
          </view>
          <view class="inp-li" @click="isShowUnit = true" >
            <view class="title">{{$t('单位')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :disabled="true" :placeholder="$t('请选择单位')" placeholder-class="input-placeholder-cai"  v-model="unitName" />
              <view class="aroow">
                <image
                  src="/static/caigou/xiala.png"
                />
              </view>
            </view>
          </view>
        </view>

        <!-- 图片上传 -->
        <view class="box-same upload-wrapper">
          <view class="upload-li">
            <view class="title">{{$t('请上传商品图片')}}<text class="require">*</text><text class="yaoqiu">{{$t('支持jpeg、jpg、png (大小7m内)')}}</text></view>
            <view class="uploads">
              <view class="img" v-for="item,index in options.productImgUrls" :key="index" @click="onPreview(item.fullurl)">
                <image
                  :src="item.fullurl"
                  mode="aspectFill"
                />
				<view class="delete" @click.stop="onDelete(index, 'productImgUrls')">
					<view class="lien"></view>
				</view>
              </view>
              <view class="img" @click="onUpload({ type: 'image', size: 7, count: 3 }, 'productImgUrls')" v-if="options.productImgUrls.length<3">
                <image
                  src="/static/caigou/upload.png"
                />
              </view>
            </view>
          </view>
          <view class="upload-li">
            <view class="title">{{$t('上传商品视频')}}<text class="yaoqiu">{{$t('支持mp4、rmvb、AVI (大小35m内)')}}</text></view>
            <view class="uploads">
              <view class="img" v-for="item,index in options.productVideoUrls" :key="index" @click="onPreviewVideo(item.fullurl)">
                <image
                  :src="item.fullurl + '?x-oss-process=video/snapshot,t_10000,m_fast'"
                  mode="aspectFill"
                />
				<view class="delete" @click.stop="onDelete(index, 'productVideoUrls')">
					<view class="lien"></view>
				</view>
              </view>
              <view class="img" @click="onUpload({ type: 'video', size: 35, count: 1}, 'productVideoUrls')" v-if="options.productVideoUrls.length<1">
                <image
                  src="/static/caigou/upload.png"
                />
              </view>
            </view>
          </view>
         <view class="upload-li">
            <view class="title">{{$t('上传商品其他文件')}}<text class="yaoqiu">{{$t('支持jpeg、jpg、png (大小7m内)')}}</text></view>
            <view class="uploads">
				<view class="img" v-for="item,index in options.productOtherFileUrls" :key="index" @click="onPreview(item.fullurl)">
					<image :src="item.fullurl"  />
					<view class="delete" @click.stop="onDelete(index, 'productOtherFileUrls')">
						<view class="lien"></view>
					</view>
				</view>
				<view class="img upload-img" @click="onUpload({ type: 'image', size: 7, count: 1}, 'productOtherFileUrls')">
					<image src="/static/caigou/upload.png" />
				</view>
            </view>
          </view>
        </view>

        <!-- 采购简介 -->
         <view class="box-same caigou-jianjie">
          <view class="title">{{$t('采购简介')}}<text class="require">*</text></view>
            <view class="textarea">
              <textarea :placeholder="$t('请输入采购简介和采购链接（也可填写拼多多,淘宝 1688商品链接）')" placeholder-class="input-placeholder-cai" v-model="purchaseInfo.description"></textarea>
              <!-- <view class="num">5/200</view> -->
			  <p class="text-888 fz24" style="position: absolute; bottom: 10rpx; right: 20rpx;"> {{ remainingService }} </p>
            </view>
         </view>
				 <view style="height: 160rpx;"></view>
       
      </scroll-view>
    </view>

	<!-- 操作按钮 -->
    <view class="btn-wrap">
		<!-- <button class="btn green mb-20"  @click="cancel">{{$t('取消')}}</button> -->
		<button :disabled="btnDis" class="btn"  @click="submit">{{$t('发布采购信息')}}</button>
    </view>

    <!-- 单位选择 -->
    <u-select :confirm-text="$t('确定')" :cancel-text="$t('取消')" v-model="isShowUnit" :list="listUnits" @confirm="confirmUnit" value-name="id" :label-name="plangJava('name')" ></u-select>
	<u-select :confirm-text="$t('确定')" :cancel-text="$t('取消')" v-model="shopCategoryOpen" :list="shopCategoryLists" @confirm="confirmUnits" value-name="id" :label-name="plangJava('name')" ></u-select>
	
	<!-- 播放视频 -->
	<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
		<view class="wrapper-video">
			<video :src="previewVideoUrl" :show-center-play-btn="true" object-fit="cover" play-btn-position="center"
				:controls="true" :autoplay="true" class="video-main">
			</video>
		</view>
	</uni-popup>



		<findCompany ref="findCompanyRef" />
  </view>
</template>


<script>
  import CommonHeader from "@/pages/components/common-header.vue";
  import {faUnitList,shopCategoryList,purchaseInfoSave} from "@/api/caigou.js"
  import { uploadFile, chooseFile, checkFileType, checkFileSize } from '@/assets/public.js';
	import findCompany from './components/findCompany.vue'
  export default {
    components: {
      CommonHeader,
	  	findCompany
    },
    data() {
      return {
        listUnits: [],
		shopCategoryOpen:false,
        isShowUnit: false,
		unitName:"",
		productName:"",
		shopCategoryLists:[],
		previewVideoUrl:"",
		options:{
			productImgUrls:[],
			productVideoUrls:[],
			productOtherFileUrls:[],
		},
		validateFlag: false,
		btnDis: false,
		purchaseInfo:{
			publishUserId: uni.getStorageSync('user_id'),  //发布人的用户ID
			categoryId:"",  //商品类别ID
			productName:"",  //商品名称
			destination:"",  //目的地
			amount:"",  //采购数量
			unit:"",  //单位
			unitRu:"",  //单位（俄语）
			description:"",  //采购简介
			productImgUrls:"",  //商品图片，多张图用,分隔
			productVideoUrls:"",  //商品视频，多个视频用,分隔
			productOtherFileUrls:""  //商品其他文件，多个文件用,分隔
		},
		maxLength: 140,
      }
    },
	created(){
		this.getFaUnitList()
		this.getShopCategoryList()
		this.purchaseInfo.publishUserId = uni.getStorageSync('user_id')
	},
	computed: {
	  remainingService() {
	    return this.maxLength - this.purchaseInfo.description.length;
	  },
	},
    methods: {
		
		//查询所有需求数量单位列表
	  getFaUnitList(){
		  faUnitList().then((res)=>{
			  if(res.code==0){
				  this.listUnits=res.data
			  }
		  })
	  },
	  //查询所有一级商品分类
	  getShopCategoryList(){
		  shopCategoryList().then((res)=>{
			  if(res.code==0){
				this.shopCategoryLists=res.data
			  }
		  })
	  },
	  //获取商品单位
      confirmUnit(e) {
				// this.purchaseInfo.unit = e[0].label
				this.purchaseInfo.unit = this.listUnits.filter(item => item.id == e[0].value)[0].name
				this.purchaseInfo.unitRu = this.listUnits.filter(item => item.id == e[0].value)[0].nameRu
				this.unitName=e[0].label
      },
	  //获取商品类型
	  confirmUnits(e){
		  this.purchaseInfo.categoryId=e[0].value
		  this.productName=e[0].label
	  },
	  // 上传视频和图片
	  async onUpload({
	  	type,
	  	size,
	  	count,
	  },key) {
	  	let res = await uploadFile(await chooseFile({
	  		type,
	  		size,
	  		count,
	  	}))
	  	if (key == 'productImgUrls') {
	  		this.options.productImgUrls.push(res);
	  	}
	  	if (key == 'productVideoUrls') {
	  		this.options.productVideoUrls = [res];
	  	}
		if (key == 'productOtherFileUrls') {
			this.options.productOtherFileUrls.push(res);
		}
	  },
	  // 删除图片
	  onDelete(index, arr) {
	    this.options[arr].splice(index, 1)
	    this.$forceUpdate();
	  },
	  onPreview(current) {
	  	uni.previewImage({
	  		current,
	  		urls: [current],
	  		
	  	})
	  },
	  // 预览视频
	  onPreviewVideo(url) {
	  	this.previewVideoUrl = url;
	  	this.$nextTick(() => {
	  		this.$refs.popupVideo.open()
	  	})
	  },
	  // 取消
	  cancel(){
		uni.navigateBack({
			delta: 1 // 返回的页面数，默认为1
		});
	  },
	  // 提交
  submit() {

		this.validateFlag= true
		for(let i=0;i<this.options.productImgUrls.length;i++){
			if(i>0){
				this.purchaseInfo.productImgUrls+=(","+this.options.productImgUrls[i].fullurl)
			}else{
				this.purchaseInfo.productImgUrls=""+this.options.productImgUrls[i].fullurl
			}
		}
		for(let i=0;i<this.options.productOtherFileUrls.length;i++){
			if(i>0){
				this.purchaseInfo.productOtherFileUrls+=(","+this.options.productOtherFileUrls[i].fullurl)
			}else{
				this.purchaseInfo.productOtherFileUrls=""+this.options.productOtherFileUrls[i].fullurl
			}
		}
		for(let i=0;i<this.options.productVideoUrls.length;i++){
			this.purchaseInfo.productVideoUrls=""+this.options.productVideoUrls[i].fullurl
		}
		if(!this.purchaseInfo.categoryId) {
			uni.showToast({
				title: this.$t('请选择商品分类'),
				icon:'none'
			});
			return
		}
		if(!this.purchaseInfo.productName) {
			uni.showToast({
				title: this.$t('请输入商品名称'),
				icon:'none'
			});
			return
		}
		if(!this.purchaseInfo.destination) {
			uni.showToast({
				title: this.$t('请输入目的地'),
				icon:'none'
			});
			return
		}
		if(!this.purchaseInfo.amount) {
			uni.showToast({
				title: this.$t('请输入数量'),
				icon:'none'
			});
			return 
		}
		if(!this.purchaseInfo.unit) {
			uni.showToast({
				title: this.$t('请选择单位'),
				icon:'none'
			});
			return 
		}
		if(this.options.productImgUrls.length == 0) {
			uni.showToast({
				title: this.$t('请上传商品图片'),
				icon:'none'
			});
			return 
		}
		if(!this.purchaseInfo.description) {
			uni.showToast({
				title: this.$t('请输入采购简介'),
				icon:'none'
			});
			return 
		}
		this.btnDis = true
		uni.showLoading({
			title: this.$t('加载中')
		});
		// console.log(this.purchaseInfo,'')
		purchaseInfoSave(this.purchaseInfo).then((res)=>{
			if(res.code==0){
				// uni.$u.toast(this.$t(res.msg))
				uni.$u.toast(res[this.plang('msg')])
				this.$refs.findCompanyRef.open(this.purchaseInfo.productName)
				return;
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 700)
			
			} else {
				// uni.$u.toast(res.msg)
				uni.$u.toast(res[this.plang('msg')])
				this.btnDis = false
			}
			uni.hideLoading()
		})
		
      }
    },
  }

</script>



<style lang="scss" scoped>
	@import '@/assets/appScss.scss';
  @import './index.scss';
</style>


<style>
  .input-placeholder-cai {
    color: #606366;
    font-size: 26rpx;
  }
</style>